(function (Vue) { //表示依赖了全局的vue

	const itemKey="MY_ITEMS"
	//保存和获取操作
	const itemStorage={
		getItems(){
			return JSON.parse(localStorage.getItem(itemKey));
		},
		saveItems(items){
			localStorage.setItem(itemKey,JSON.stringify(items));
		},
	}

	//es6语法 const表示声明常量
	//从本地获取数据
	const items=itemStorage.getItems();
	//自定义全局指令，用于输入框聚焦
	//注意指令名不要加上v-,底层会自动加上
	Vue.directive("app-focus",{
		inserted(el,binding){
			el.focus();
		},
		update(el,binding){
			//选中当前的任务项才会被聚焦
			if(binding.value){
				el.focus();
			}
		},
	})
	new Vue({
		el:"#todoapp",
		data:{
			//es6里面当属性名和属性值相同时，可以只写属性名
			items:items,
			currentItem:null,
		},
		methods: {
			//添加item的方法
			//es6语法，对于方法的简写 event拿到原始事件对象
			addItem(event){
				//1.拿到文本框的值
				console.log("addItem");
				const content=event.target.value.trim();
				//2.赋值item的id属性
				const id=this.items.length+1;
				//3.如果content为空(长度为0)则什么都不做，否则items数组进行item的添加
				if(content.length==0){
					return;
				}else{
					this.items.push({
						id:id, //id
						content:content,//content
						completed:false, //completed
					});
				}
				//4.在添加完毕以后对文本框进行清空
				event.target.value="";
			},
			//移除任务项的一条数据
			removeItem(index){
				this.items.splice(index,1);
			},
			//清除掉已经完成的item数据
			removeCompleted(){
				this.items=this.items.filter((item)=>{
					return !item.completed;
				})
			},
			//选中的任务项进入编辑模式
			toEdit(item){
				//当前选中的item赋给currentItem
				this.currentItem=item;
			},
			//退出编辑模式
			cancelEdit(){
				this.currentItem=null;
			},
			//编辑选中任务项的内容
			finishEdit(item,index,event){
				//1.获得当前输入框的值
				const content=event.target.value.trim();
				//2.判断输入框的值是否为空
				if(content.length==0){
					this.removeItem(index);
					return;
				}
				//3.如果不为空，则添加到原有的任务项当中，做一个更新
				item.content=content;
				//4.移除.editing样式，退出编辑状态
				this.currentItem=null;
			}
		},
		//监听属性，监听未完成的数量
		computed:{
			//filter函数过滤所有未完成的item
			//过滤没有完成的item，返回一个数组
			reamaing:function(){
				const unitems=this.items.filter(function(item){
					return !item.completed;
				});
				//返回没有完成的unitems数量
				return unitems.length;
			},
			toggleAll:{
				get(){
					//当全部item被完成以后返回true
					console.log("get:"+this.reamaing);
					return this.reamaing === 0;
				},
				//当复制框的状态更新以后，任务列表的状态更新
				set(newValue){
					console.log("set");
					//迭代出数组中所有的任务项，然后将当前复制框的状态值给每一个任务的状态值
					this.items.forEach((item)=>{ //es6语法箭头函数
						item.completed=newValue; 
					});
				}
			}
		},
		//定义监听器，监听items
		watch:{
			//当对象中的某个属性发生改变后，默认情况下不会被监听
			//如果你希望对象属性改变后仍被监听，就需要深度监听
			// items(newValue,oldValue){
			// 	console.log(newValue);
			// }
			//深度监听
			items:{
				deep:true,
				handler(newItems,oldItems){
					//保存操作
					itemStorage.saveItems(newItems);
				}
			}
		}
	})

})(Vue);
